<template>
    <div class="selectPeople">
        <div class="header">
            <p class="remove" @click="goback()">取消</p>
            <p class="title">添加关注的人</p>
            <p class="suer" @click="confirmBtn()">确定</p>
        </div>
        <ul class="selectPeople_box">
            <li v-for="(item,index) in PeopleList" :key="index" @click="selectClick($event)">
                <div class="selectPeople_l">
                    <p class="selectPeople_l_img">
                        <img :src="item.headerImg" alt="">
                    </p>
                    <p class="selectPeople_l_name">{{item.peopleName}}</p>
                </div>
                <div class="selectPeople_r">
                    <input class="checkInput" type="checkbox" name="" :id="'checkInput'+index" ref="refInput" :value="item.peopleId">
                    <label class="checkLabel" :for="'checkInput'+index">
                        <i></i>
                    </label>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: "selectPeople",
  data() {
    return {
      PeopleList: [
        {
          headerImg: "",
          peopleName: "杠精",
          isSelect: false,
          peopleId: "11111"
        },
        {
          headerImg: "",
          peopleName: "Fendi",
          isSelect: false,
          peopleId: "22222"
        },
        {
          headerImg: "",
          peopleName: "向前行",
          isSelect: false,
          peopleId: "33333"
        },
        {
          headerImg: "",
          peopleName: "admin",
          isSelect: false,
          peopleId: "44444"
        },
        {
          headerImg: "",
          peopleName: "杜君",
          isSelect: false,
          peopleId: "55555"
        }
      ],
      checkedList: [] /*选择的人数存放数组 */
    };
  },
  methods: {
      goback(){
          this.$router.push({path:'/personalDetails',query:{myPersonalId:'myPersonalId',selectPeople:this.checkedList.toString()}})
      },
    /*选择事件 */
    selectClick(event) {
      let _self = this;
      const srcEl = event.target || event.srcElement;
      if (srcEl.checked == false) {
        this.checkedList.splice(_self.checkedList.indexOf(srcEl.value), 1);
      } else if (srcEl.checked == true) {
        this.checkedList.push(srcEl.value);
      }
    },
    /*确定按钮 */
    confirmBtn(){
        this.$router.push({path:'/personalDetails',query:{myPersonalId:'myPersonalId',selectPeople:this.checkedList.toString()}})
    }
  }
};
</script>
<style lang="less" scoped>
@import url(../assets/less/public.less);
.selectPeople {
    .header{
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        @flex();
        @justify5();
        padding: 0 30px;
        height: 120px;
        line-height: 120px;
        background: @config-bg15;
        box-sizing: border-box;
        p{
            @color1(); 
        }
        .title{
            @font16();
        }
    }
  .selectPeople_box {
      margin-top: 120px;
    li {
      border-bottom: 2px solid @config-bg3;
      height: 120px;
      @flex();
      @justify5();
      padding: 0 30px;
      .selectPeople_l {
        @flex();
        @justify1();
        .selectPeople_l_img {
          margin-right: 22px;
          width: 72px;
          height: 72px;
          border-radius: 72px;
          overflow: hidden;
          background: @config-bg3;
          img {
            width: 100%;
          }
        }
        .selectPeople_l_name {
          @color2();
        }
      }
      .selectPeople_r {
        position: relative;
        .checkInput {
          width: 48px;
          height: 48px;
          opacity: 0;
        }
        .checkLabel {
          width: 48px;
          height: 48px;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 48px;
          border: 2px solid @config-bg3;
          box-sizing: border-box;
          background: @config-bg2;
        }
        .selectTrue {
          background: @config-bg13;
          border: 2px solid @config-bg13;
        }
        input:checked + label {
          background-color: @config-bg13;
          border: 0.02666667rem solid @config-bg13;
        }
        input:checked + label::after {
          position: absolute;
          top: 0.08rem;
          left: 0.16rem;
          content: "";
          width: 0.16rem;
          height: 0.32rem;
          border: 0.04rem solid #fff;
          border-top: none;
          border-left: none;
          transform: rotate(45deg);
        }
      }
    }
    li:last-child {
      border-bottom: none;
    }
  }
}
</style>


